<template>
	<div class="bill">
		<!-- bill-nav -->
		<div class="navBg">
			<a href="#" class="me-4">榜单</a>
			<span class="more">
				<a href="#">更多</a>
				<i>&nbsp;</i>
			</span>
		</div>
		<!-- bill-main -->
		<div class="bill-main d-flex">
			<div class="list">
				<div class="top">
					<div class="topCover">
						<img src="../assets/rank/img1.jpg">
						<a href="#" class="msk" title="飙升榜"></a>
					</div>
					<div class="topWord">
						<a href="javascript:void(0)" title="飙升榜"><h3>飙升榜</h3></a>
						<div class="play d-flex">
							<a href="javascript:void(0)" class="icon-play icon1" title="播放"></a>
							<a href="javascript:void(0)" class="icon-play icon2" title="收藏"></a>
						</div>
					</div>
				</div>
				<div class="billList">
					<ul style="margin-left: 15px;">
						<li v-for="(item,index) in billData.billList1" :title="item.name">
							<div class="billLi">
								<span class="no" :class="{notop:index+1==1||index+1==2||index+1==3}">{{index+1}}</span>
								<a href="#" class="musicName">{{item.name}}</a>
								<div class="oper">
									<a href="javascript:void(0)" class="icon-play1 icon3" title="播放"></a>
									<a href="javascript:void(0)" class="icon-play1 icon4" title="添加"></a>
									<a href="javascript:void(0)" class="icon-play1 icon5" title="收藏"></a>
								</div>
							</div>
						</li>
					</ul>
					<div class="moreAll">
						<a href="#" class="moreA">查看全部></a>
					</div>
				</div>
			</div>
			
			<div class="list">
				<div class="top">
					<div class="topCover">
						<img src="../assets/rank/img2.jpg">
						<a href="#" class="msk" title="新歌榜"></a>
					</div>
					<div class="topWord">
						<a href="javascript:void(0)" title="新歌榜"><h3>新歌榜</h3></a>
						<div class="play d-flex">
							<a href="javascript:void(0)" class="icon-play icon1" title="播放"></a>
							<a href="javascript:void(0)" class="icon-play icon2" title="收藏"></a>
						</div>
					</div>
				</div>
				<div class="billList">
					<ul style="margin-left: 15px;">
						<li v-for="(item,index) in billData.billList2" :title="item.name">
							<div class="billLi">
								<span class="no" :class="{notop:index+1==1||index+1==2||index+1==3}">{{index+1}}</span>
								<a href="#" class="musicName">{{item.name}}</a>
								<div class="oper">
									<a href="javascript:void(0)" class="icon-play1 icon3" title="播放"></a>
									<a href="javascript:void(0)" class="icon-play1 icon4" title="添加"></a>
									<a href="javascript:void(0)" class="icon-play1 icon5" title="收藏"></a>
								</div>
							</div>
						</li>
					</ul>
					<div class="moreAll">
						<a href="#" class="moreA">查看全部></a>
					</div>
				</div>
			</div>
			
			<div class="list" style="width: 228px;">
				<div class="top">
					<div class="topCover">
						<img src="../assets/rank/img3.jpg">
						<a href="#" class="msk" title="原创榜"></a>
					</div>
					<div class="topWord">
						<a href="javascript:void(0)" title="原创榜"><h3>原创榜</h3></a>
						<div class="play d-flex">
							<a href="javascript:void(0)" class="icon-play icon1" title="播放"></a>
							<a href="javascript:void(0)" class="icon-play icon2" title="收藏"></a>
						</div>
					</div>
				</div>
				<div class="billList">
					<ul style="margin-left: 15px;">
						<li v-for="(item,index) in billData.billList3" :title="item.name">
							<div class="billLi">
								<span class="no" :class="{notop:index+1==1||index+1==2||index+1==3}">{{index+1}}</span>
								<a href="#" class="musicName">{{item.name}}</a>
								<div class="oper">
									<a href="javascript:void(0)" class="icon-play1 icon3" title="播放"></a>
									<a href="javascript:void(0)" class="icon-play1 icon4" title="添加"></a>
									<a href="javascript:void(0)" class="icon-play1 icon5" title="收藏"></a>
								</div>
							</div>
						</li>
					</ul>
					<div class="moreAll">
						<a href="#" class="moreA">查看全部></a>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import axios from 'axios'
	import {reactive,onMounted} from 'vue'
	
	const billData=reactive({
		billList1:[],
		billList2:[],
		billList3:[]
	})
	function compare(property) {
	  return function (a, b) {
	    var value1 = a[property];
	    var value2 = b[property];
	    return value2 - value1;
	  }
	}
	onMounted(()=>{
		axios.get(`https://mock.apifox.cn/m1/2897896-0-default/bill`)
		.then(function (response) {
			billData.billList1=response.data.billList1;
			billData.billList1=billData.billList1.sort(compare("palyflow"))
			// console.log(billData.billList1.sort(compare("palyflow")))
			billData.billList2=response.data.billList2;
			billData.billList2=billData.billList2.sort(compare("palyflow"))
			billData.billList3=response.data.billList3;
			billData.billList3=billData.billList3.sort(compare("palyflow"))
		})
	})
	// console.log(billData.billList1)
</script>

<style scoped>
	/* nav */
	a{
		text-decoration: none;
		font-size: 12px
	}
	p{
		padding: 0;
		margin: 0;
	}
	ul,li,ol{
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.navBg,.more i,.icon-play,.icon3,.icon5{
		background: url('../assets/hotImg/index.png') no-repeat 0 9999px;
	}
	.bill-main{
		background: url('../assets/rank/index_bill.png') no-repeat;
	}
	.topCover .msk{
		background: url('../assets/new/coverall.png') no-repeat;
	}
	.icon4{
		background: url('../assets/hotImg/icon.png');
	}
	.navBg{
		height: 33px;
		padding: 0 10px 0 34px;
		position: relative;
		border-bottom: 2px solid #C10D0C;
		background-position: -225px -156px;
	}
	.navBg a{
		font-size: 20px;
		color: #333;
	}
	.more a{
		color: #666;
	}
	.more{
		position: absolute;
		right: 12px;
	}
	.more a{
		color: #666;
		font-size: 12px
	}
	.more i{
		display: inline-block;
		width: 12px;
		height: 12px;
		margin-left: 4px;
		vertical-align: middle;
		background-position: 0 -240px;
	}
	/* body */
	.list{
		width: 230px;
	}
	.bill-main{
		height: 472px;
		margin-top: 20px;
		padding-left: 1px;
	}
	.top{
		height: 120px;
		padding: 20px 0 0 19px;
		display: flex;
	}
	.topCover{
		width: 80px;
		height: 80px;
		position: relative;
	}
	.topCover img{
		display: block;
		width: 100%;
		height: 100%;
	}
	.topCover .msk{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-position: -145px -57px
	}
	/* 文字 */
	.topWord{
		width: 116px;
		margin: 6px 0 0 10px;
	}
	.topWord h3{
		font-size: 14px;
		color: #333;
		font-weight: bold;
	}
	.icon-play{
		display: block;
		width: 22px;
		height: 22px;
		margin-right: 10px;
		text-indent: -9999px;
	}
	.icon1{
		background-position: -267px -205px;
	}
	.icon2{
		background-position: -300px -205px;
	}
	.icon1:hover{
		background-position: -267px -235px;
	}
	.icon2:hover{
		background-position: -300px -235px;
	}
	/* 列表 */
	.billList li{
		height: 32px;
		line-height: 32px;
		position: relative;
	}
	.billLi{
		width: 180px;
		height: 32px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.billList li:hover .oper{
		display: block;
	}
	.more a:hover,.billList li:hover .musicName,.moreAll:hover .moreA{
		text-decoration: underline;
	}
	.billList li:hover .billLi{
		width: 58%;
	}
	.no{
		display: inline-block;
		position: relative;
		width: 35px;
		height: 32px;
		text-align: center;
		color: #666;
		font-size: 16px;
	}
	.notop{
		color: #c10d0c;
	}
	.musicName{
		width: 170px;
		height: 32px;
		font-size: 12px;
		color: #000;
	}
	.showoper{
		display: block;
	}
	.oper{
		display: none;
		position: absolute;
		top: 8px;
		right: 0;
	}
	.icon-play1{
		float: left;
		width: 17px;
		height: 17px;
		margin-right: 10px;
	}
	.icon3{
		background-position: -267px -268px;
	}
	.icon4{
		background-position: 0 -700px;
	}
	.icon5{
		background-position: -297px -268px;
	}
	.icon3:hover{
		background-position: -267px -288px;
	}
	.icon4:hover{
		background-position: -22px -700px;
	}
	.icon5:hover{
		background-position: -297px -288px;
	}
	/* more */
	.moreAll{
		height: 32px;
		margin-right: 32px;
		text-align: right;
	}
	.moreA{
		line-height: 32px;
		color: #000;
	}
</style>